<template>
  <div class="content">
    <div class="left">
      <div class="upper">
        <div class="title_up">
          <p>场景树</p>
        </div>
        <div class="cont_up">
          <el-tree :data="tree" :props="defaultProps" ref="treeRef" empty-text="暂无数据">
            <template #default="{ node, id }">
              <span class="custom-tree-node" @mouseover="showActions(node.id)" @mouseleave="hideActions(node.id)">
                <span>{{ node.label }}</span>
                <span class="icon_f">
                  <!-- @click.stop 是一个事件修饰符，用于阻止事件冒泡。
                   没有设置点击图标，也会展开、收缩 -->
                  <!-- <a class="iconfont icon-chakan" style="font-size: 24px;" @click.stop="toggleIcon(node)"></a> -->
                  <a :class="['iconfont', iconState[node.id] || 'icon-chakan']" @click.stop="toggleIcon(node)"
                    v-show="visibleNodeId === node.id"></a>
                  <a class="iconfont icon-delete" @click="Delete(node)" v-show="visibleNodeId === node.id">
                  </a>
                </span>
              </span>
            </template>
          </el-tree>

        </div>
      </div>
      <div class="under">
        <div class="log">
          <el-collapse class="box_up">
            <el-collapse-item title="日志">
              <el-scrollbar class=" box">
                <div v-for="(logEntry, index) in log" :key="index" class="log-entry">
                  <p> {{ logEntry.date }}</p>
                  <div class="log-content">
                    <p :style="{ color: logEntry.state === 0 ? 'green' : '' }">{{ logEntry.content }}</p>
                  </div>
                </div>
              </el-scrollbar>
            </el-collapse-item>
          </el-collapse>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import tree from '../../data/tree.json';
import log from '../../data/log.json';
import dayjs from 'dayjs';

export default {
  name: 'Left',
  data() {
    return {
      iconState: {}, // 用于记录每个节点的图标状态
      tree,
      log,
      treeData: [],
      visibleNodeId: null,
      defaultProps: {
        children: 'children',
        label: 'name'
      }
    };
  },
  methods: {
    showActions(nodeId) {
      this.visibleNodeId = nodeId;
    },
    hideActions(nodeId) {
      if (this.visibleNodeId === nodeId) {
        this.visibleNodeId = null;
      }
    },
    Delete(node) {
      const deleteNode = (nodes, id) => {
        for (let i = 0; i < nodes.length; i++) {
          if (nodes[i].id === id) {
            nodes.splice(i, 1);
            return true;
          } else if (nodes[i].children && deleteNode(nodes[i].children, id)) {
            return true;
          }
        }
        return false;
      };

      deleteNode(this.tree, node.id);
      this.$refs.treeRef.remove(node); // 更新树视图

      const currentTime = dayjs().format('YYYY-MM-DD HH:mm:ss');
      this.log.push({ date: currentTime, content: `模型删除：${node.label}`, state: 3 });
    },
    // 切换图标
    toggleIcon(node) {
      // console.log(node.data.id); // 拿到id
      this.iconState[node.id] = this.iconState[node.id] === 'icon-biyanjing' ? 'icon-chakan' : 'icon-biyanjing';

      const currentTime = dayjs().format('YYYY-MM-DD HH:mm:ss');
      this.log.push({ date: currentTime, content: `模型${this.iconState[node.id] === 'icon-chakan' ? '显示' : '隐藏'}：${node.label}`, state: 3 });
    }
  }
};
</script>


<style lang="scss" scoped>
// .custom-title {
//   color: red;
//   font-size: 18px;
//   /* 更多自定义样式 */
// }
.content {

  display: flex;

  .left {
    // width: 20vw;
    width: 340px;
    // height: 500px;
    // height: 100vh;
    // background-color: pink;
    // position: fixed;
    height: 90vh;

    /* 设置定位方式为固定 */
    .upper {

      .title_up {


        height: 34px;
        border-top: 1px solid #CDD0D6;
        /* 上边框 */
        border-bottom: 1px solid #CDD0D6;

        /* 下边框 */
        p {
          font-size: 12px;
          line-height: 30px;
          margin-left: 14px;
          font-weight: 500;
        }
      }

      .cont_up {
        height: 100%;
        /* 使元素高度占满父容器 */
        // min-height: 480px;
        /* 设置最小高度为480px */
        height: 500px;

        .custom-tree-node {
          flex: 1;
          display: flex;
          align-items: center;
          justify-content: space-between;
          font-size: 14px;
          padding-right: 8px;

          // margin-right: 5px;
          .icon_f {
            display: flex;
            align-items: center;

            .iconfont.icon-biyanjing {
              // color: red;
              font-size: 18px !important; //闭眼
              display: block !important;
              position: absolute;
              right: 10%;
            }
          }
        }

        /* 设置初始颜色和大小 */
        .iconfont {
          color: #323133;
          /* 初始颜色 */
          // font-size: 222px;
          /* 初始大小 */
          font-size: 24px !important; //全
        }


        .icon-delete {
          font-size: 18px !important; //删除
          margin-left: 6px;
          width: 18px;
        }

        /* 鼠标触碰时改变颜色 */
        .iconfont:hover {
          color: #409EFF;
          /* 鼠标触碰时的颜色 */
        }
      }
    }

    .under {
      width: 340px;
      position: relative;

      .bottom {
        border-bottom: 1px solid #CDD0D6;
      }

      .log {
        border-top: 0.01px solid #c7cacf;
        margin-top: 20px;
        position: fixed;
        bottom: 0;
        /* 将元素固定在浏览器窗口的底部 */
        /* height: 500px; */
        width: 340px;
        overflow: hidden;

        .custom-title {
          font-size: 2px;
          /* 设置字体大小 */
          width: 340px;
          height: 50px;
        }

        .log-entry {
          /* width: 350px; */
          margin-left: 14px;
          padding-top: 8px;
          display: flex;

          p {
            font-size: 12px;
            color: #4a4b50;
          }

          .log-content {
            p {
              font-size: 12px;
              color: #8c9097;
            }

            margin-left: 15px;
            white-space: normal;
            /* 允许文本换行 */
            overflow: hidden;
            /* 隐藏溢出的内容 */
            text-overflow: ellipsis;
            /* 使用省略号表示溢出的文本 */
            max-width: 26ch;
            /* 设置最大宽度为25个字符 */
          }
        }

        .box {
          @function getvw($w) {
            @return calc($w/1440) * 100+vw;
          }

          height: getvw(220);
          background-color: #F2F3F5;
          margin-bottom: -25px;
          border-top: 1px solid #CDD0D6;
        }

        /* // 激活方向 */
        :deep(.el-collapse-item__arrow.is-active) {
          transform: rotate(90deg);
        }

        /* // 默认方向 */
        :deep(.el-collapse-item__arrow),
        .el-tabs__nav {
          transform: rotate(-90deg);
        }
      }
    }
  }
}

//UI修改样式
:deep(.el-collapse-item__header) {
  // color: #185fed;
  font-size: 12px;
  height: 34px;
  padding-left: 14px;
}

:deep(.el-scrollbar__bar.is-vertical) {
  display: block !important;
}

:deep(.el-scrollbar__bar.is-vertical .el-scrollbar__thumb) {
  background: #409EFF;
}
</style>
